@import 'common';

.sosh {
  @include clearfix;
  text-align: center;
  &-item {
    float: left;
    line-height: 0;
    margin: 0 2px;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      text-decoration: none;
    }

    &:focus,
    &:active {
      outline: 0;
    }

    &-icon {
      @include inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      color: #fff;
      text-decoration: none;
    }

    &-text {
      display: none;
    }

    @each $name, $color in $sites {
      &.#{$name} {
        .sosh-item-icon {
          background: $color;
        }

        &:hover {
          .sosh-item-icon {
            background: darken($color, 10%);
          }
        }
      }
    }
  }

  &-pop {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0 0 8px #cdcdcd;
    padding: 20px;
    border: 1px solid #eee;
    z-index: 999;
    &-show {
      display: block;
    }
    &-close {
      color: #bbb;
      position: absolute;
      width: 10px;
      height: 10px;
      line-height: 10px;
      right: 10px;
      top: 10px;
      font-size: 16px;
      font-weight: normal;
      font-family: Consolas, Monaco;
      text-decoration: none;

      &:hover {
        text-decoration: none;
        color: #666;
      }
    }
  }

  &-qrcode {
    &-pic {
      width: 120px;
      height: 120px;
      overflow: hidden;
      float: left;

      img {
        height: 100%;
        width: 100%;
        vertical-align: top;
        margin: 0;
        padding: 0;
        border: 0;
      }
    }

    &-text {
      color: #666;
      float: left;
      font-size: 13px;
      line-height: 30px;
      margin-left: 30px;
    }
  }
}

